import { ProCard, ProFormField, ProFormGroup, ProFormItemRender, ProFormList, ProFormSelect, ProFormText } from "@ant-design/pro-components";
import React from "react";
import { queryDataSource } from "../../../api";

const SelectBlock = () => {
    return (
      <ProFormList
        name="selectItems"
        label="字段"
        creatorButtonProps={{
          creatorButtonText: "新建",
          icon: false,
          type: "link",
          style: { width: "unset" },
        }}
        min={1}
        // codpyIconProps={false}
        deleteIconProps={{ tooltipText: "删除" }}
        itemRender={({ listDom, action }) => (
          <div
            style={{
              display: "inline-flex",
              marginInlineEnd: 10,
            }}
          >
            {listDom}
            {action}
          </div>
        )}
      >
        <ProFormText allowClear={false} width="xs" name={["name"]} />
      </ProFormList>
    );
  };
  const WhereBlock = () => {
    return (
      <ProFormList
        name="whereItems"
        label="条件"
        creatorButtonProps={{
          creatorButtonText: "新建",
          icon: false,
          type: "link",
          style: { width: "unset" },
        }}
        min={1}
        copyIconProps={false}
        deleteIconProps={{ tooltipText: "删除" }}
        itemRender={({ listDom, action }) => (
          <div
            style={{
              display: "inline-flex",
              marginInlineEnd: 25,
            }}
          >
            {listDom}
            {action}
          </div>
        )}
      >
        <ProFormGroup>
          <ProFormText
            fieldProps={{ addonBefore: "字段" }}
            allowClear={false}
            width="sm"
            name={["key"]}
          />
          <ProFormSelect
            options={[{ label: "大于" }, { label: "小于" }]}
            allowClear={false}
            width="xs"
            name={["op"]}
          />
          <ProFormText
            fieldProps={{ addonBefore: "值" }}
            allowClear={false}
            width="sm"
            name={["name"]}
          />
        </ProFormGroup>
      </ProFormList>
    );
  };
  const InsertBlock = () => {
    return (
      <ProFormList
        name="insertItems"
        creatorButtonProps={{
          creatorButtonText: "新建",
          icon: false,
          type: "link",
          style: { width: "unset" },
        }}
        min={1}
        copyIconProps={false}
        deleteIconProps={{ tooltipText: "删除" }}
        itemRender={({ listDom, action }) => (
          <div
            style={{
              display: "inline-flex",
              marginInlineEnd: 25,
            }}
          >
            {listDom}
            {action}
          </div>
        )}
      >
        <ProFormGroup>
          <ProFormText
            fieldProps={{ addonBefore: "字段" }}
            allowClear={false}
            width="sm"
            name={["key"]}
          />
          <ProFormText
            fieldProps={{ addonBefore: "值" }}
            allowClear={false}
            width="sm"
            name={["value"]}
          />
        </ProFormGroup>
      </ProFormList>
    );
  };
  const UpdateBlock = () => {
    return (
      <ProFormList
        name="updateItems"
        creatorButtonProps={{
          creatorButtonText: "新建",
          icon: false,
          type: "link",
          style: { width: "unset" },
        }}
        min={1}
        copyIconProps={false}
        deleteIconProps={{ tooltipText: "删除" }}
        itemRender={({ listDom, action }) => (
          <div
            style={{
              display: "inline-flex",
              marginInlineEnd: 25,
            }}
          >
            {listDom}
            {action}
          </div>
        )}
      >
        <ProFormGroup>
          <ProFormText
            fieldProps={{
              addonBefore: "字段",
              size: "small",
            }}
            allowClear={false}
            width="sm"
            name={["key"]}
          />
          <ProFormText
            fieldProps={{
              addonBefore: "值",
              size: "small",
            }}
            allowClear={false}
            width="sm"
            name={["value"]}
          />
        </ProFormGroup>
      </ProFormList>
    );
  };
const SqlBlock = () => {
    return (
      <ProFormList
        copyIconProps={false}
        itemRender={({ listDom, action }) => (
          <ProCard
            bordered
            bodyStyle={{
              paddingBlockEnd: 0,
              paddingInline: 10,
            }}
            className="sssssssssssss"
            style={{
              marginBottom: 10,
              //   display: "flex",
              //   marginInlineEnd: 25,
            }}
          >
            <div style={{ position: "absolute", right: 10 }}> {action}</div>
            {listDom}
            {/* {action} */}
          </ProCard>
        )}
        creatorRecord={{
          action: "from",
          whereItems: [{ key: "1", op: ">", value: "1" }],
          selectItems: [{ name: "*" }],
          insertItems: [{ key: "", value: "" }],
          updateItems: [{ key: "", value: "" }],
        }}
        name={"actions"}
      >
        <ProFormGroup>
          <ProFormSelect
            allowClear={false}
            options={[
              {
                label: "select",
                value: "select",
              },
              {
                label: "from",
                value: "from",
              },
              {
                label: "insert",
                value: "insert",
              },
              {
                label: "update",
                value: "update",
              },
              {
                label: "where",
                value: "where",
              },
            ]}
            style={{ padding: 0 }}
            width="md"
            name="action"
            label="操作"
          />
        </ProFormGroup>
        <ProFormItemRender name="action">
          {({ value }) => {
            if (value == "from") {
              return <ProFormField name="table" label="表名" />;
            }
            if (value == "select") {
              return <SelectBlock />;
            }
            if (value == "where") {
              return <WhereBlock />;
            }
            if (value === "insert") {
              return <InsertBlock />;
            }
            if (value === "update") {
              return <UpdateBlock />;
            }
            return null;
          }}
        </ProFormItemRender>
      </ProFormList>
    );
  };
const SqlGenerate = ()=>{
    return   <ProFormList
    name="sqls"
    // label="SQL语句"
    creatorRecord={(a) => {
      return {
        alias: a,
        actions: [{ action: "from" }],
      };
    }}
    creatorButtonProps={{
      creatorButtonText: "添加SQL",
    }}
    min={1}
    // copyIconProps={false}
    itemRender={({ listDom, action }, { index }) => (
      <ProCard
        bordered
        style={{ marginBlockEnd: 8 }}
        title={
          <ProFormGroup>
            <div>SQL语句{index + 1}</div>
            <ProFormSelect
            fieldProps={{
              fieldNames: {
                value: "id",
                label: "name",
              },
            }}
            request={async () => {
              let res = await queryDataSource({});
              return res.data;
            }}
            width="md"
            name="dataSource"
            label="数据源"
          />
            <ProFormText
            placeholder='别名'
              layout="horizontal"
              fieldProps={{ size: "small" }}
              name="alias"
            />
          </ProFormGroup>
        }
        extra={action}
        bodyStyle={{
          paddingBlockEnd: 0,
          paddingBlock: 6,
          paddingInline: 10,
        }}
      >
        {listDom}
      </ProCard>
    )}
    initialValue={
      [
        // { name: "颜色", items: [{ name: "红" }, { name: "黄" }] },
      ]
    }
  >
    <SqlBlock />
  </ProFormList>
}
export default SqlGenerate